import React, {useContext, useEffect, useState} from 'react';
import {StatusBar, ImageBackground, View, TextInput, Dimensions, StyleSheet, TouchableOpacity} from 'react-native';
import {Button, Icon, Image, Text} from 'react-native-elements';
import LocaleContext from '../libs/locale';
import AsyncStorage from "@react-native-async-storage/async-storage";
import WalletContext from "../libs/wallet";
import {TouchableHighlight} from "react-native-gesture-handler";
import Toast from "react-native-simple-toast";
import {constansts} from "../libs/constansts";
import {bytes2Hex, keyPairFromSeed, randomSeed, toAddress} from "../libs/keyPair";
import {convertKeyPair} from "../libs/ed2curve";
import {enAES, getGroupMember, joinGroup} from "../libs/chatGroup";
import {useFocusEffect} from "@react-navigation/native";

const {width,height,scale} = Dimensions.get("window");

const ChatGroupDetail = ({ navigation,route }: any) => {
    const locale:any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);
    const Q_Address = route?.params?.Q_Address;
    const Q_Key = route?.params?.Q_Key;
    const QP_Priv = route?.params?.QP_Priv;
    const Creator = route?.params?.Creator;

    //群成员数
    const [Number,setNumber] = useState("");
    const [GroupData,setGroupData]:any = useState({});

    //初始化一下标题和二维码按钮
    useEffect(() => {

    },[])
    //获取成员数
    useEffect(()=>{
        const work = async () => {
            const setTitle = (title:string) => {
                navigation.setOptions({title: title})
            }
            let res = await getGroupMember(Q_Address);
            setNumber(res.dict.nunber);

            setTitle(`聊天信息(${res.dict.nunber})`);
        }
        work();
    },[])
    //获取群数据
    useFocusEffect(
        React.useCallback(()=>{
            const work = async () => {
                let ChatGroupList = await AsyncStorage.getItem("myChatGroupList") || "[]";
                // console.log("主页数据："+SaveList)
                var resList: any = JSON.parse(ChatGroupList) || [];
                console.log(ChatGroupList)
                let data:any = {};
                for(let i = 0 ; i < resList.length ; i++ )
                {
                    if(resList[i].addressOut == Q_Address)
                    {
                        data = resList[i];
                        break;
                    }
                }
                setGroupData(data);
            }
            work();
        },[])
    )
    return (
        <View style={styles.container}>
            {/* 群名称 */}
            <View style={styles.OneLine}>
                <Text style={styles.text}>
                    群聊名称
                </Text>
                <View style={styles.right}>
                    <Text style={styles.rightText}>
                        {GroupData.desc} >
                    </Text>
                </View>
            </View>
            <View style={styles.divider} >
                <View style={styles.dividerColor}/>
            </View>
            {/* 群二维码*/}
            <TouchableHighlight
                onPress={()=>{
                    navigation.navigate("ChatGroupQRcode",{Q_Address,Q_Key,QP_Priv,Creator,desc:route?.params?.desc});
                }}>
                <View style={styles.OneLine}>
                    <Text style={styles.text}>
                        群二维码
                    </Text>
                    <View style={styles.right}>
                        <Icon type='font-awesome-5' name="qrcode" color={'#696969'} size={width/360*20} style={{marginRight:10}} />
                        <Text style={styles.rightText}>
                            >
                        </Text>
                    </View>
                </View>
            </TouchableHighlight>
            <View style={styles.divider} >
                <View style={styles.dividerColor}/>
            </View>
            {/* 备注*/}
            <TouchableHighlight
                onPress={()=>{
                    navigation.navigate("ChatGroupRemark",{Q_Address});
                }}
            >
                <View style={styles.OneLine}>
                <Text style={styles.text}>
                    备注
                </Text>
                <View style={styles.right}>
                    <Text style={styles.rightText}>
                        {GroupData.selfRemark || ""} >
                    </Text>
                </View>
            </View>
            </TouchableHighlight>
            <View style={styles.divider} >
                <View style={styles.dividerColor}/>
            </View>
            {/* 群成员数*/}
            <View style={styles.OneLine}>
                <Text style={styles.text}>
                     群成员数
                </Text>
                <View style={styles.right}>
                    <Text style={styles.rightText}>
                        {Number} >
                    </Text>
                </View>
            </View>
            <View style={styles.divider} >
                <View style={styles.dividerColor}/>
            </View>
        </View>
    );
};
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:"#ECECEC"
    },
    right:{
        flex:1,
        flexDirection:"row",
        justifyContent:"flex-end"
    },
    rightText:{
        color:"#707070",
        fontSize:width/360*17,
    },
    OneLine:{
        width:width,
        padding:17,
        backgroundColor:"#fff",
        flexDirection:"row",
    },
    divider:{
        width:width,
        height:3/scale,
        backgroundColor:"#fff"
    },
    dividerColor:{
        width:width-34,
        height:3/scale,
        alignSelf:"center",
        backgroundColor:"#eee"
    },
    text:{
        fontSize:width/360*17,
        alignSelf:"center"
    }
});
export default ChatGroupDetail;
